<template>
	<view class="content">
		<view style="width:750rpx;height: 190rpx;background:linear-gradient(to bottom, #273965, #353f56);">
			<view style="margin-top: 24rpx;width:75%;margin-left:80rpx;">
				<template>
					<u-search v-model="ArticleFrom.articleTitle" placeholder="搜索相关最新图文" :showAction="false"
						@search="indexAll"></u-search>
				</template>
			</view>
			<view class="dictionaries">
				<u-tabs :list="list1" @click="indexAll" ></u-tabs>
			</view>
			<strong></strong>

		</view>
		<view class="host">
			<!-- <view style="width: 100%; height: 40rpx;"></view> -->
			<view class="host_body" v-for="(item,index) in hostList" :key="index">
				<view class="imageing" v-if="item.images.split(',')[0]">
					<img style="width: 345rpx;" mode="widthFix" :src="$getImgUrl(item.images.split(',')[0])"
						@click="main(item)">
				</view>
				<!-- 推文视频 -->
				<view v-if="item.video">
					<video style="width: 345rpx;" mode="widthFix"
						:src="'http://152.136.35.251:8765/image/playVideoById?id='+item.video.split(',')[0]"
						@click="main(item)"></video>
				</view>
				<view class="host_darkness">
					<view class="darkness_silence">{{item.articleTitle}}</view>
					<!-- <view class="darkness_silence">{{item.labelId}}</view> -->
					<u-row class="ty">
						<u-col span="2" class="yui">
							<u--image class="image1" width="40rpx" height="40rpx" :src="$getImgUrl(item.imageId)"
								shape="circle"></u--image>
						</u-col>
						<u-col span="4" class="yui">
							<p class="yui">{{item.userName}}</p>
						</u-col>
						<u-col span="6">
							<p class="yui">{{item.createTime}}</p>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>
		<!-- 悬浮按钮 -->
		<view class="boxone" v-if="userType == 1">
			<u-button customStyle="width: 120rpx;height: 120rpx;background:none;border:none;font-size:40rpx;"
				@click="gotuarticle">
				<u-icon name="edit-pen-fill" color="white" size="70rpx"></u-icon>
			</u-button>
		</view>

	</view>
</template>

<script>
	export default {
		onTabClick(index) {
		  // 保存选项的选择状态到本地缓存
		  wx.setStorageSync('selectedTabIndex', index);
		  // 执行其他操作，例如更新页面内容
		  // ...
		},
		onLoad() {
		  // 从本地缓存中获取保存的选项的选择状态
		  const selectedTabIndex = wx.getStorageSync('selectedTabIndex');
		  if (selectedTabIndex !== undefined) {
		    // 设置 u-tabs 的选中状态
		    this.setData({
		      'list1[selectedTabIndex].selected': true
		    });
		  }
		
		  // 执行其他加载数据的操作
		  // ...
		},
		data() {
			return {
				userType: '',
				images: '',
				imageId: '',
				//表单对象
				ArticleFrom: {
					articleTitle: "",
					articleContent: "",
					video: "",
					publishTime: "",
					Tags: "",
					createTime: "",
					updateTime: "",
					userId: "",
					doctorName: "",
					images: '',
					imageId: '',
					labelId: '',
					isPublished: "",
					dataId: '',
					approvalStatus: "",
				},
				item: {
					labelId: "",
				},
				list1: [

				],
				list2: [],
				hostList: []
			}
		},
		onLoad() {
			var userId = uni.getStorageSync('userId')
		},
		onShow() {
			this.$store.dispatch('upTotalNum')
			this.userType = uni.getStorageSync('userType');
			this.listHost();
			this.indexAll(this.item);
		},
		mounted() {
			this.indexAll(this.item);
			this.listHost();
		},
		methods: {
			indexAll(item) {
				this.list1.forEach(tab => {
				        tab.selected = false;
				      });
				let data = {}
				if (this.ArticleFrom.articleTitle != undefined) {
					data.articleTitle = this.ArticleFrom.articleTitle
				}
				if (item.labelId != undefined) {
					data.labelId = item.labelId
				}
				this.$myRequest({
					method: 'get',
					url: '/Sys/ArticleLater',
					data: data
				}).then(res => {
					this.hostList = res.data.data.content
				})
			},

			listHost() {
				var that = this
				this.$myRequest({
					method: 'get',
					url: "/dictData/selectDict",
				}).then(res => {
					that.list1 = res.data.data.map(item => {
						return {
							name: item.dictLabel,
							labelId: item.dataId
						}
					})
					let data = {
						name: "全部",
						labelId: 0
					}
					that.list1.unshift(data)
				})

			},
			
			main(item) {
				uni.navigateTo({
					url: '/pages/article/user_article?id=' + item.id + "&userId=" + item.userId
				})
			},
			sectionChange(index) {
				this.curNow = index;
			},

			//跳转文章编辑页面
			gotuarticle() {
				uni.navigateTo({
					url: '/pages/article/publishArticle',
					animationType: 'slide-in-right', // 设置转场动画效果
					animationDuration: 300 // 设置转场动画持续时间，单位为毫秒
				});
			}
		}
	}
</script>

<style>
	.boxone {
		border-radius: 35rpx;
		background-color: #2cd3b5;
		position: fixed;
		left: 550rpx;
		bottom: 90px;
		overflow: hidden;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.addlogo {
		height: 50rpx;
		width: 50rpx;
		margin-top: -85rpx;
		margin-left: 550rpx;
		margin-bottom: 45rpx;
	}

	.host {
		/* height: 100%; */
		margin-top: 40rpx;
		margin: 0 auto;
		padding: 0 20rpx;
		column-count: 2;
		column-gap: 20rpx;

	}

	.ty {}

	.host_body {
		width: 345rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		overflow: hidden;
		background-color: #fff;
		break-inside: avoid;
		/*避免在元素内部插入分页符*/
		box-sizing: border-box;
		/* 	margin-top: rpx; */
		margin-bottom: 20rpx;
		box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
	}

	.imageing {
		width: 345rpx;
		height: auto;
	}

	.dictionaries {
		width: 80%;
		margin: 0 auto;
		height: 70rpx;

	}

	.imageing_img {
		width: 345rpx;
		height: auto;
	}

	.host_darkness {
		padding-left: 22rpx;
		font-size: 24rpx;
		margin-top: 15rpx;
		padding-bottom: 22rpx;

	}

	.darkness_silence {
		font-weight: 800;
		margin-top: 12rpx;
		font-size: 27rpx;
		margin-left: 10rpx;
	}

	.darkness_String {
		margin-top: 15rpx;
	}

	.yu {
		font-size: 12px;
	}

	.yui {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 5px;
	}
</style>